<template>
  <div>
    <!-- 查询栏 -->
    <div class="toolbar">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-date-picker v-model="startDate" type="date" placeholder="开始日期" style="width: 100%" />
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="endDate" type="date" placeholder="结束日期" style="width: 100%" />
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入车牌号" v-model="searchKeyword" />
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-row>
    </div>

    <!-- 操作栏 -->
    <div class="button-bar">
      <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete">批量删除</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="paginatedData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="使用记录ID" width="100" />
      <el-table-column prop="parkingCode" label="车位编号" width="100" />
      <el-table-column prop="plateNumber" label="车牌号码" width="120" />
      <el-table-column prop="owner" label="车辆所有人" width="120" />
      <el-table-column prop="startTime" label="开始时间" width="150" />
      <el-table-column prop="endTime" label="结束时间" width="150" />
      <el-table-column prop="usageType" label="使用性质" width="100" />
      <el-table-column prop="contact" label="联系方式" width="130" />
      <el-table-column prop="fee" label="使用费用" width="100" />
      <el-table-column prop="community" label="所属小区" width="140" />
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column label="操作" width="100">
        <template v-slot="scope">
          <i class="el-icon-edit" @click="editRow(scope.row)" />
          <i class="el-icon-delete" @click="confirmDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-size="pageSize"
      :total="filteredData.length"
      layout="total, prev, pager, next, jumper"
      @current-change="handlePageChange"
      style="margin-top: 20px; text-align: center;" />

    <!-- 删除确认 -->
    <el-dialog title="确认删除" :visible.sync="deleteDialogVisible" width="30%">
      <p>确定要删除该使用记录吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteConfirmed">确定</el-button>
      </span>
    </el-dialog>

    <!-- 添加 / 编辑弹窗 -->
    <el-dialog :title="editForm.id ? '编辑记录' : '添加记录'" :visible.sync="editDialogVisible" width="600px">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="车位编号">
          <el-input v-model="editForm.parkingCode" />
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input v-model="editForm.plateNumber" />
        </el-form-item>
        <el-form-item label="车辆所有人">
          <el-input v-model="editForm.owner" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="editForm.startTime" type="datetime" style="width: 100%" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="editForm.endTime" type="datetime" style="width: 100%" />
        </el-form-item>
        <el-form-item label="使用性质">
          <el-select v-model="editForm.usageType">
            <el-option label="临时" value="临时" />
            <el-option label="固定" value="固定" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editForm.contact" />
        </el-form-item>
        <el-form-item label="使用费用">
          <el-input v-model="editForm.fee" />
        </el-form-item>
        <el-form-item label="所属小区">
          <el-input v-model="editForm.community" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      searchKeyword: '',
      currentPage: 1,
      pageSize: 5,
      selection: [],
      deleteDialogVisible: false,
      deleteTarget: null,
      editDialogVisible: false,
      editForm: {},
      tableData: [
        {
          id: 1,
          parkingCode: 'P001',
          plateNumber: '浙A12345',
          owner: '张三',
          startTime: '2024-06-01 08:00',
          endTime: '2024-06-01 18:00',
          usageType: '临时',
          contact: '13900000001',
          fee: '20元',
          community: '金华万府',
          createTime: '2024-06-01 07:30'
        },
        {
          id: 2,
          parkingCode: 'P002',
          plateNumber: '浙B23456',
          owner: '李四',
          startTime: '2024-06-02 09:00',
          endTime: '2024-06-02 20:00',
          usageType: '固定',
          contact: '13888888888',
          fee: '50元',
          community: '星河时代',
          createTime: '2024-06-02 08:45'
        }
      ]
    };
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => {
        const matchesKeyword = !this.searchKeyword || item.plateNumber.includes(this.searchKeyword);
        const createDate = new Date(item.createTime);
        const inDateRange =
          (!this.startDate || new Date(this.startDate) <= createDate) &&
          (!this.endDate || createDate <= new Date(this.endDate));
        return matchesKeyword && inDateRange;
      });
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1;
    },
    resetSearch() {
      this.searchKeyword = '';
      this.startDate = '';
      this.endDate = '';
      this.currentPage = 1;
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleAdd() {
      const maxId = Math.max(...this.tableData.map(item => item.id), 0);
      const now = new Date().toISOString().slice(0, 16).replace('T', ' ');
      this.editForm = {
        id: maxId + 1,
        parkingCode: '',
        plateNumber: '',
        owner: '',
        startTime: now,
        endTime: now,
        usageType: '临时',
        contact: '',
        fee: '',
        community: '',
        createTime: now
      };
      this.editDialogVisible = true;
    },
    editRow(row) {
      this.editForm = { ...row };
      this.editDialogVisible = true;
    },
    saveEdit() {
      const index = this.tableData.findIndex(item => item.id === this.editForm.id);
      if (index !== -1) {
        this.$set(this.tableData, index, { ...this.editForm });
      } else {
        this.tableData.push({ ...this.editForm });
      }
      this.$message.success('保存成功');
      this.editDialogVisible = false;
    },
    confirmDelete(row) {
      this.deleteTarget = row;
      this.deleteDialogVisible = true;
    },
    deleteConfirmed() {
      if (this.deleteTarget) {
        this.tableData = this.tableData.filter(item => item.id !== this.deleteTarget.id);
        this.deleteDialogVisible = false;
        this.$message.success('删除成功');
      }
    },
    handleBatchDelete() {
      if (!this.selection.length) {
        this.$message.warning('请选择要删除的记录');
        return;
      }
      this.$confirm('确定要批量删除选中的使用记录吗？', '批量删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selection.map(item => item.id);
        this.tableData = this.tableData.filter(item => !ids.includes(item.id));
        this.selection = [];
        this.$message.success('批量删除成功');
      });
    }
  }
};
</script>

<style scoped>
.toolbar {
  margin-bottom: 20px;
}
.button-bar {
  background: #f2f2f2;
  padding: 6px 10px;
  margin-bottom: 20px;
}
.el-button {
  margin-right: 10px;
}
.el-icon-edit,
.el-icon-delete {
  cursor: pointer;
  margin-right: 10px;
  color: #2a6496;
}
.dialog-footer {
  text-align: right;
}
</style>